<template>
	<div class="padding-lr-xs">
		<a-form v-if="!~['bpmn:CallActivity', 'bpmn:SubProcess'].indexOf(formData.type)">
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="节点类型"
			>
				<a-input v-model="formData.type" disabled></a-input>
			</a-form-item>
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="节点标识"
			>
				<a-input v-model="formData.id" @change="
	          (e) => {
	            updateId(e.target.value);
	          }
	        " :disabled="true"></a-input>
			</a-form-item>
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
				label="节点名称"
			>
				<a-input placeholder="请输入节点名称" v-model="formData.name" @change="
	          (e) => {
	            updateName(e.target.value);
	          }
	        "></a-input>
			</a-form-item>

			<template v-if="formData.type == 'bpmn:UserTask'">
			  <a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
					label="通知类型"
				>
			    <a-select
			      v-model="formData.notification"
			      placeholder="请选择"
			      mode="multiple"
			      @change="changeNotification"
			    >
						<a-select-option value="message">短信</a-select-option>
						<a-select-option value="mail">邮件</a-select-option>
						<a-select-option value="note">站内信</a-select-option>
						<a-select-option value="wechat">企业微信</a-select-option>
			    </a-select>
			  </a-form-item>
			</template>
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
			>
				<span slot="label">
					执行监听器
					<a-tooltip placement="left">
						<template slot="title">
							在流程执行过程中，监听流程实例的生命周期事件，如创建、启动、完成等。可以在这些事件发生时执行自定义的逻辑操作。
						</template>
						<a-icon type="question-circle" />
					</a-tooltip>
				</span>
			  <a-button type="primary" size="small" @click="showExecute(1)"
			    >编辑</a-button
			  >
			</a-form-item>
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
			  v-if="formData.type == 'bpmn:UserTask'"
			>
				<span slot="label">
					任务监听器
					<a-tooltip placement="left">
						<template slot="title">
							在任务执行过程中，监听任务的生命周期事件，如创建、分配、完成等。可以在这些事件发生时执行自定义的逻辑操作
						</template>
						<a-icon type="question-circle" />
					</a-tooltip>
				</span>
			  <a-button type="primary" size="small" @click="showExecute(2)"
			    >编辑</a-button
			  >
			</a-form-item>
<!--			<a-form-item-->
<!--			  v-if="-->
<!--			    !~[-->
<!--			      'bpmn:StartEvent',-->
<!--			      'bpmn:SequenceFlow',-->
<!--			      'bpmn:EndEvent',-->
<!--			      'bpmn:ExclusiveGateway',-->
<!--			    ].indexOf(formData.type)-->
<!--			  "-->
<!--				:labelCol="labelCol"-->
<!--				:wrapperCol="wrapperCol"-->
<!--			  label="多实例"-->
<!--			>-->
<!--			  <a-button type="primary" size="small" @click="showMultiInstance()"-->
<!--			    >编辑</a-button-->
<!--			  >-->
<!--			  <multiInstance-->
<!--			    ref="multiInstance"-->
<!--			    :visible="multiInstanceVisible"-->
<!--			    :element="nodeElement"-->
<!--			    :modeler="modeler"-->
<!--			    @close="finishMultiInstance"-->
<!--			  ></multiInstance>-->
<!--			</a-form-item>-->
			<a-form-item
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
			  label="到期时间"
			  v-if="formData.type == 'bpmn:BusinessRuleTask'"
			>
			  <t-date
			    v-model="formData.dueDate"
			    placeholder="请选择日期"
			    style="width: 100%"
			    @change="(value) => updateDueDate(value)"
			  ></t-date>
			</a-form-item>
			<!--sequenceFlow-->
			<!-- <template v-if="formData.type == 'bpmn:SequenceFlow'">
			  <a-form-item
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
			    label="流转条件"
			    v-if="formDesinType !== 'custom'"
			  >
			    <a-radio-group
			      v-model="formData.conditionType"
			      @change="changeConditionType"
			    >
			      <a-radio-button value="form">
			        表单字段
			      </a-radio-button>
			      <a-radio-button value="expression">
			        表达式
			      </a-radio-button>
			    </a-radio-group>
			  </a-form-item>
			  <a-form-item
			    v-if="
			      formData.conditionType == 'expression' || formDesinType === 'custom'
			    "
					:labelCol="labelCol"
					:wrapperCol="wrapperCol"
			    label="分支条件"
			  >
			    <a-input
			      v-model="formData.sequenceFlow"
			      @change="
			        (e) => {
			          updateSequenceFlow(e.target.value);
			        }
			      "
			    ></a-input>
			  </a-form-item>
			  <template v-if="formData.conditionType == 'form'">
			    <a-form-item
						:labelCol="labelCol"
						:wrapperCol="wrapperCol"
						label="分支条件"
					>
			      <a-input
			        v-model="formData.sequenceFlow"
			        @click="
			          () => {
			            conditionVisible = true;
			          }
			        "
			        readOnly
			        placeholder="分支条件"
			        @change="
			          (e) => {
			            updateSequenceFlow(e.target.value);
			          }
			        "
			      ></a-input>
			    </a-form-item>
			    <conditions
			      ref="condition"
			      :formFieldLists="formFieldLists"
			      :updateList="updateList"
			      :visible="conditionVisible"
			      :element="nodeElement"
			      :modeler="modeler"
			      @ok="finishConditionVisible"
			      @close="
			        () => {
			          conditionVisible = false;
			        }
			      "
			    ></conditions>
			  </template>
			</template> -->

			<a-form-item
				v-if="nodeType === 'line'"
				:labelCol="labelCol"
				:wrapperCol="wrapperCol"
			  label="分支条件"
			>
				<a-input v-model="formData.sequenceFlow" placeholder="示例:驳回分支路线输入${outcome == '驳回'}"
					@change=" (e) => {updateSequenceFlow(e.target.value)}"
				>
				<a-select slot="addonAfter" v-model="conditionOption" style="width: 75px" placeholder="常用" @change="changeSequenceFlow" allowClear>
					<a-select-option v-for="item in conditionArray" :key="item.value">
						{{ item.text }}
					</a-select-option>
				</a-select>
				</a-input>
			</a-form-item>


		</a-form>
		<!-- 监听器 -->
		<execute-property-panel
		  ref="execute"
		  :visible="visible"
		  :type="type"
		  :loading="confirmLoading"
		  :model="mdl"
		  @cancel="handleCancel"
		  :executionListener="executionListener"
		  :taskListener="taskListener"
		  @addExecute="addExecute"
		></execute-property-panel>
	</div>
</template>

<script>
	import ExecutePropertyPanel from "./executePropertyPanel.vue"
	import conditions from './modal/conditions.vue';
	import multiInstance from './modal/multiInstance.vue';
	export default {
		name: "NodeBasicConfig",
		components: {
			ExecutePropertyPanel,
			conditions,
			multiInstance
		},
		props: {
			modeler: {
				type: Object,
				required: true
			},
			nodeElement: {
				type: Object,
				required: true
			},
			formData: {
				type: Object,
				required: true
			},
			formFieldLists:{
			  type: Array
			},
			updateList:{
			  type: Array
			},
			nodeType: {
				type: String
			}
		},
		data() {
			return {
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 6,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 18,
					},
				},
				visible: false,
				type: 0,
				confirmLoading: false,
				mdl: null,
				executionListener:[],
				taskListener:[],
				conditionVisible:false,
				multiInstanceVisible:false,
				conditionOption: undefined,
				conditionArray: [{
					text: "同意",
					value: "${outcome == '同意'}"
				},{
					text: "驳回",
					value: "${outcome == '驳回'}"
				},{
					text: "终止",
					value: "${outcome == '终止'}"
				}]
			}
		},
		watch: {
		  nodeElement: {
		    deep: true,
		    immediate: true,
		    handler(newVal, oldVal) {
		      this.executionListener = []
		      this.taskListener = []
		      const bpmnModeler = this.modeler
		      const modeling = bpmnModeler.get('modeling')
		      const businessObject = newVal.businessObject
			  if(this.conditionArray.find(e => e.value === this.formData.sequenceFlow)) {
				this.conditionOption = this.formData.sequenceFlow;
			  }else{
				this.conditionOption = undefined;
			  }
				
		      if (this.nodeElement.type == "bpmn:StartEvent") {
		        this.updateName("开始");
		      }
		      if (this.nodeElement.type == "bpmn:EndEvent") {
		        this.updateName("结束");
		      }
		      if(newVal.businessObject?.extensionElements){
		        // 执行监听器
		        this.executionListener = newVal.businessObject.extensionElements?.values
		        .filter(item => item.$type === 'flowable:ExecutionListener')
		        .map(item => {
		        let type
		        if ('class' in item) type = 'class'
		        if ('expression' in item) type = 'expression'
		        if ('delegateExpression' in item) type = 'delegateExpression'
		        return {
		          event: item.event,
		          type: type,
		          className: item[type],
		          params: item.fields?.map(field => {
		          let fieldType
		          if ('stringValue' in field) fieldType = 'stringValue'
		          if ('expression' in field) fieldType = 'expression'
		          return {
		            name: field.name,
		            type: fieldType,
		            value: field[fieldType],
		            editable:false
		          }
		          }) ?? []
		        }
		        }) ?? []
		        // 任务监听器
		        this.taskListener = businessObject.extensionElements?.values
		        .filter(item => item.$type === 'flowable:TaskListener')
		        .map(item => {
		          let type
		          if ('class' in item) type = 'class'
		          if ('expression' in item) type = 'expression'
		          if ('delegateExpression' in item) type = 'delegateExpression'
		          return {
		            event: item.event,
		            type: type,
		            className: item[type],
		            params: item.fields?.map(field => {
		              let fieldType
		              if ('stringValue' in field) fieldType = 'stringValue'
		              if ('expression' in field) fieldType = 'expression'
		              return {
		                name: field.name,
		                type: fieldType,
		                value: field[fieldType],
		            editable:false
		              }
		            }) ?? []
		          }
		        }) ?? []
		      }
		    }
		  }
		},
		methods: {
			// 给分支路线选择常用判断条件
			changeSequenceFlow(value) {
				this.formData.sequenceFlow = value;
				this.updateSequenceFlow(value);
			},
			updateProperties(properties) {
				this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
			},
			updateId(name) {
				this.updateProperties({
					id: name
				});
			},
			updateName(name) {
				this.updateProperties({
					name: name
				});
			},
			handleCancel() {
			  this.visible = false
			},
			finishConditionVisible(){
			  this.conditionVisible = false
			},
			finishMultiInstance(){
			  this.multiInstanceVisible = false
			},
			// 通知
			changeNotification(val){
			  if (val === '') val = null
			  this.updateProperties({ 'notification': val.toString() })
			  this.$emit('setFormBtnData', 'notification',val.toString());
			},
			// 监听器
			addExecute(e, type) {
				if (e?.length) {
					let extensionElements = this.nodeElement.businessObject.get('extensionElements')
					if (!extensionElements) {
						extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
					}
					// 清除旧值
					if (type === 1) {
						extensionElements.values = extensionElements.values?.filter(item => item.$type !==
							'flowable:ExecutionListener')
					} else {
						extensionElements.values = extensionElements.values?.filter(item => item.$type !==
							'flowable:TaskListener')
					}
					e.forEach(item => {
						let executionListener = ''
						if (type === 1) {
							executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
						} else {
							executionListener = this.modeler.get('moddle').create('flowable:TaskListener')
						}
						executionListener['event'] = item.event
						executionListener[item.type] = item.className
						if (item.params && item.params.length) {
							item.params.forEach(field => {
								const fieldElement = this.modeler.get('moddle').create('flowable:Field')
								fieldElement['name'] = field.name
								fieldElement[field.type] = field.value
								// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
								// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: `<![CDATA[${field.value}]]>` })
								// fieldElement[field.type] = valueElement
			 				executionListener.get('fields').push(fieldElement)
							})
						}
						extensionElements.get('values').push(executionListener)
					})
					this.updateProperties({
						extensionElements: extensionElements
					})
				} else {
					const extensionElements = this.nodeElement.businessObject[`extensionElements`]
					if (extensionElements) {
						if (type === 1) {
							extensionElements.values = extensionElements.values?.filter(item => item.$type !==
								'flowable:ExecutionListener')
						} else {
							extensionElements.values = extensionElements.values?.filter(item => item.$type !==
								'flowable:TaskListener')
						}
					}
				}
				this.visible = false
			},
			showExecute(e) {
			  this.visible = true
			  this.$refs.execute.getData(e)
			},
			showMultiInstance(){
			  this.multiInstanceVisible = true
			  if(this.$refs.multiInstance) this.$refs.multiInstance.getFormData()
			},
			updateSequenceFlow(val) {
			  let newCondition = this.modeler.get("moddle").create('bpmn:FormalExpression', {
			    body: val
			  });
			  this.updateProperties({
			    conditionExpression: newCondition
			  });
			}
		}
	}
</script>

<style>
</style>
